<template>
  <MainContainer class="p-5">
    <div class="flex">
      <el-button type="primary" @click="openDialog()">+添加告警</el-button>
    </div>
    <MyTable
      v-loading="loading"
      :is-show-selection="false"
      class="my-2"
      :data="list"
      :columns="columns"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      data-test="alarm-strategy-dialog"
      :title="dialogTitle"
      :options="createFormOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
    <RecipientList
      v-model:visible="recipientListVisible"
      title="接收人列表"
      :loading="loading"
      :list="recipientList"
      @confirm="handleRecipientConfirm"
    ></RecipientList>
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MainContainer from "@/components/MainContainer.vue";
import MyFormDialog from "@/components/MyFormDialog.vue";
import MyTable from "@/components/MyTable.vue";
import RecipientList from "@/views/disinfect/AlarmNotice/components/RecipientList.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getAbnormalStrategy,
  createAbnormalStrategy,
  deleteAbnormalStrategy,
  updateAbnormalStrategy,
  getAbnormalStrategyOne,
  getAbnormalUser,
} from "@/api/robot-disinfect-alarm";
import { ref } from "vue";

const channel = ref("");
function handleChange(v) {
  channel.value = v;
}

const createFormOptions = [
  {
    prop: "type",
    label: "告警级别：",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      return (
        <el-radio-group>
          <el-radio label={1}>普通 </el-radio>
          <el-radio label={2}>警告</el-radio>
          <el-radio label={3}>错误</el-radio>
        </el-radio-group>
      );
    },
  },
  {
    prop: "status",
    label: "开启通知：",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      return <el-switch active-value={1} inactive-value={0}></el-switch>;
    },
  },
  {
    prop: "channel",
    label: "通知渠道：",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      if (showItem.value === false) {
        return (
          <el-checkbox-group
            disabled
            onChange={() => handleChange(channel.value)}
            v-model={channel.value}
          >
            {channelList.value.map((item) => {
              return (
                <el-checkbox-button label={item.value} value={item.value}>
                  {item.name}
                </el-checkbox-button>
              );
            })}
          </el-checkbox-group>
        );
      } else {
        return (
          <el-checkbox-group
            onChange={() => handleChange(channel.value)}
            v-model={channel.value}
          >
            {channelList.value.map((item) => {
              return (
                <el-checkbox-button label={item.value} value={item.value}>
                  {item.name}
                </el-checkbox-button>
              );
            })}
          </el-checkbox-group>
        );
      }
    },
  },
  {
    prop: "abnormalUserIds",
    label: "接收人：",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      if (showItem.value === false) {
        return (
          <div>
            <el-button
              disabled
              link
              onClick={() => handleRecipientList(channel.value.toString())}
            >
              +
            </el-button>
          </div>
        );
      } else {
        return (
          <div>
            <el-button
              link
              onClick={() => handleRecipientList(channel.value.toString())}
            >
              +
            </el-button>
          </div>
        );
      }
    },
  },
];
const channelList = ref([
  {
    name: "微信",
    value: 1,
  },
  {
    name: "短信",
    value: 2,
  },
  {
    name: "钉钉",
    value: 3,
  },
]);

const columns = [
  {
    prop: "type",
    label: "告警级别：",
    formatter(row) {
      const alarmType = row.type;
      switch (alarmType) {
        case 1:
          return "普通";
        case 2:
          return "警告";
        case 3:
          return "错误";
        default:
          break;
      }
    },
  },
  {
    prop: "status",
    label: "开启通知：",
    formatter(row) {
      const { status } = row;
      switch (status) {
        case 0:
          return "关闭";
        case 1:
          return "开启";
        default:
          break;
      }
    },
  },
  {
    prop: "channel",
    label: "通知渠道：",
    formatter(row) {
      const { channel } = row;
      let alarmChannel = channel.split(",");
      alarmChannel = alarmChannel.map((i) => {
        switch (i) {
          case "1":
            return "微信";
          case "2":
            return "短信";
          case "3":
            return "钉钉";
          default:
            break;
        }
      });
      return alarmChannel.join(",");
    },
  },
  {
    prop: "abnormalUserIds",
    label: "接收人：",
  },
  {
    label: "操作",
    prop: "action",
    minWidth: 100,
    customRender(row) {
      return (
        <div>
          <el-button
            link
            type="danger"
            onClick={async () => {
              await ElMessageBox.confirm("确认继续操作吗", "警告");
              const { message } = await handleDelete(row.id);
              ElMessage({ type: "success", message });
            }}
          >
            删除
          </el-button>
          <el-button
            class="!text-[#707bdf]"
            link
            onClick={() => openDialog(row.id)}
          >
            编辑
          </el-button>
        </div>
      );
    },
  },
];

const recipientListVisible = ref(false);
const listQuery = ref({
  page: 1,
  limit: 10,
  name: null,
  type: "",
});
const recipientList = ref([]);
async function handleRecipientList(c) {
  recipientListVisible.value = true;
  listQuery.value.type = c;
  const res = await getAbnormalUser(listQuery.value);
  recipientList.value = res.data.list;
}

const showItem = ref(true);

function openDialog(id) {
  dialogTitle.value = id ? "编辑" : "新增";
  showItem.value = id ? false : true;
  if (id) {
    getOne(id);
  }
  formData.value.status = 0;
  dialogVisible.value = true;
}

async function getOne(id) {
  const res = await getAbnormalStrategyOne(id);
  formData.value = res.data;
  formData.value.channel = res.data.channel.split(",");
}

async function handleConfirm(data) {
  data.channel = data.channel.toString();
  if (data.id) {
    handleUpdate(data.id, data);
  } else {
    handleCreate(data);
  }
}

function handleRecipientConfirm(v) {
  formData.value.abnormalUserIds = v;
}

const crudOptions = {
  queryApi: getAbnormalStrategy,
  createApi: createAbnormalStrategy,
  deleteApi: deleteAbnormalStrategy,
  updateApi: updateAbnormalStrategy,
  getOneApi: getAbnormalStrategyOne,
};
const {
  params,
  handleQuery,
  list,
  loading,
  dialogVisible,
  handleDelete,
  formData,
  dialogTitle,
  total,
  handleUpdate,
  handleCreate,
} = useCRUD(crudOptions);

handleQuery();
</script>
